<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>openLookeng2021年度报告</title>
</head>
<link rel="stylesheet" href="./css/common.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script src="./js/swiper.js"></script>
<script src="./js/axios.js"></script> 
<script src="https://openlookeng.io/common/jquery-3.1.1.min.js"></script> 
<link rel="stylesheet" href="./css/pc.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/new.css">

<body> 
    <a href="https://openlookeng.io/zh/2021summary/" class="changeLanguages"></a>
    <div class="bgmMusic">
        <img src="./images/bg-music.svg">
    </div>
    <audio id="bgm" src="./images/bgm.mp3" autoplay="autoplay" preload loop></audio>
    <div class="pc-box" id="pcBox"></div>
    <div class="mob-box swiper" id="outer-container"> </div>
    
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement('script');
            hm.src = 'https://hm.baidu.com/hm.js?d5f7e2406b6ef91d4494f0c6ea829f91';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(hm, s);
        })();

        // 适配safair
        function safariHacks() {
            let windowsVH = window.innerHeight / 100;
            console.log(windowsVH);
            document.querySelector('#outer-container').style.setProperty('--vh', windowsVH + 'px');
            window.addEventListener('resize', function () {
                document.querySelector('#outer-container').style.setProperty('--vh', windowsVH + 'px');
            });
        }

        safariHacks(); 
        let container = document.querySelector('#outer-container');
        let pcBox = $('#pcBox');

        $(function(){
            // 播放音乐  
            var audio = document.getElementById('bgm');
            let isVideo = true 
            container.addEventListener('pointerup',function(){  
                if(isVideo){
                    $(".bgmMusic").addClass("active")
                    audio.play();
                    isVideo = false
                }
                
            },true) 
            $(".bgmMusic").bind("click", function() {
                if(audio !== null) {   
                    if(audio.paused) {
                        audio.play(); 
                        $(".bgmMusic").addClass("active")
                    } else {
                    
                        audio.pause();  
                        $(".bgmMusic").removeClass("active")
                    }
                }
            })    
            

        })

        // 获取数据
        var isDataContribution = false;
        axios.get('/en/2021summary/oauth2/userinfo').then(res => {
            return getData(res.data.user)
        }).catch(err => { 
            console.log(err);
            isDataContribution = true
        })
        function getData(user) {
            let data = []
            axios.get(`https://omapi.osinfra.cn/query/newYear/2022?community=openlookeng&user=${user}`).then(res => {
                let percentage = 0;
                if(res.data.data[0]){
                    isDataContribution = false
                    data = res.data.data[0];   
                    percentage = parseFloat(data.beat_percentage) * 100;
                }else{
                    isDataContribution = true
                } 
                
                let pcDom = `
                    <div class="container box-one"><div class="front"></div><div class="back"></div></div>
                    <div class="container box-tow"><div class="front"></div><div class="back"></div></div>
                    <div class="container box-three"><div class="front"></div><div class="back"></div></div>
                    <div class="container box-four"><div class="front"></div><div class="back"></div></div>
                `;

                let pcDomNoData = `
                    <div class="container box-1"><div class="front"></div><div class="back"></div></div> 
                    <div class="container box-2"><div class="front"></div><div class="back"></div></div>
                `; 
 

                //isPcContribution \ isH5Contribution 判断有无贡献 
                let isPcContribution = false,
                    isH5Contribution = false;
                     
                if(isDataContribution){
                    pcBox.addClass('no-contribution').empty().html(pcDomNoData) ;
                    isPcContribution = true;
                    isH5Contribution = true;
                }else{
                    pcBox.removeClass('no-contribution').empty().html(pcDom);
                    isPcContribution = false;
                    isH5Contribution = false;
                }

                intaPc(data, percentage,isPcContribution);
                intaSwiper(data, percentage, isH5Contribution); 
            })
        } 
        // getData('georgecao')

        function timeChange(time) {
            if (time) {
                let EndTime = new Date(time);
                let y = EndTime.getFullYear();
                let m = EndTime.getMonth() + 1;
                let d = EndTime.getDate();
                let h = EndTime.getSeconds()
                let all = `${y}/${m}/${d}`
                return all
            } else {
                return 'none'
            } 
        }

        // pc端事件
        function intaPc(data, percentage,isPcContribution) {
            let front = document.querySelectorAll(".front");
            let back = document.querySelectorAll(".back"); 
            pcBox.find('.front').click(function(){ 
                for (let i = 0; i < front.length; i++) {
                    let list = []  
                    
                    if(isPcContribution){
                        list[0] =`<div class="contents">
                                        <div class="page page-one">
                                            <div class="text-box"> 
                                                <div class="ani1">
                                                    <p class="fz16">2021 openLooKeng Un-Wrapped</p> 
                                                    <p class="fz14">Dear</p>
                                                    <p class="cOrange fz16 mb10 "> ${data.user_login}</p>
                                                    <p class="one-text">Do what you love, and love what you do.</p>
                                                    <p class="one-text">As we usher in 2022,</p>
                                                    <p class="one-text">let's look back at the special moments from the past year.</p>
                                                    <p class="one-text mb10">On June 30, 2020,</p>
                                                    <p class="one-text ">he data virtualization engine openLooKeng</p>
                                                    <p class="one-text ">officially went open source.</p>
                                                    <p class="one-text">Since then, the community has attracted<span class='cOrange fz14'>over 100,000</span>users</p>
                                                    <p class="one-text">and <span class='cOrange fz14'>2,000 </span>pull requests,</p>
                                                    <p class="one-text">received <span class='cOrange fz14'>1,500</span>issues,</p>
                                                    <p class="one-text">housed <span class='cOrange fz14'>27,900 </span>comments.</p>
                                                    <p class="one-text">openLooKeng has been downloaded</p>
                                                    <p class="one-text">more than <span class='cOrange fz14'>100,000 </span>times by users </p>
                                                    <p class="one-text mb12">from <span class='cOrange fz14'>210 </span>cities across <span class='cOrange fz14'>40</span> countries and regions</p>

                                                    <p class="cOrange fz16">We hope to see you in the openLooKeng community in 2022. </p>
                                                    <p class="one-text">Together, we can </p>
                                                    <p class="one-text">build a prosperous big data ecosystem.</p> 

                                                </div>
                                            </div>
                                            <div class="people">
                                                <img src="./images/item1/img4.png" alt="">
                                                <img src="./images/item1/img1.png" alt="">
                                                <img src="./images/item1/img2.png" alt="">
                                            </div> 
                                        </div>
                                    </div>`
                        list[1] =`<div class="contents">
                                    <div class="page page-six">
                                        <div class="main">
                                            <div class="six-logo"><img src="./images/item6/logo.png" alt=""></div>
                                            <div class="text-box">
                                                <p class="">For every contribution,  </p>
                                                <p>comment,and click in 2021,</p>
                                                <p class="">we say - Thank you.</p>
                                                <p class="">Stay with us to build a better</p>
                                                <p class="">openLooKeng in 2022.</p>
                                                <p class="">Always by your side.</p>
                                                <p class="">Happy New Year!</p>
                                                <p class="bold" style="margin: 10px 0 0;">From,</p>
                                                <p class="bold " style="margin:0 0 5px ;">The openLooKeng open source community</p>

                                                <img src="./images/code.png" class='codeImg' alt=""> 
                                                <p class="">Check your 2021 openLooKeng Un-Wrapped</p>
                                            </div>
                                        </div>
                                        <div class="bg-six">
                                            <div class="footer">
                                                <img src="./images/item6/女+猫.png" alt="">
                                            </div>
                                            <div class="border"> </div>
                                        </div> 
                                    </div>
                                </div>`
                    }else{
                        list[0] = `<div class="contents">
                                        <div class="page page-one">
                                            <div class="text-box"> 
                                                <div class="ani1">
                                                    <p class="fz16">2021 openLooKeng Un-Wrapped</p> 
                                                    <p class="fz14">Dear</p>
                                                    <p class="cOrange fz16 mb12 "> ${data.user_login}</p>
                                                    <p class="one-text">Do what you love, and love what you do,</p>
                                                    <p class="one-text">In 2021, we made progress against all odds.</p>
                                                    <p class="one-text">As we usher in 2022,</p>
                                                    <p class="one-text mb30">let's look back at the special moments from the past year.%</p>
                                                    
                                                    <p class="one-text">It all started on <span class='cOrange fb'>${timeChange(data.first_time_of_enter)}</span></p>
                                                    <p class="one-text">when you first joined the openLooKeng community.</p>
                                                    <p class="one-text">A quick browse turned into a long-lasting partnership.</p>
                                                    <p class="one-text">Because of you, every moment is worth remembering.</p>
                                                </div>
                                            </div>
                                            <div class="people">
                                                <img src="./images/item1/img4.png" alt="">
                                                <img src="./images/item1/img1.png" alt="">
                                                <img src="./images/item1/img2.png" alt="">
                                            </div> 
                                        </div>
                                    </div> `
                        list[1] = `<div class="contents">
                                        <div class="page page-three">
                                            <div class="panel2-top">
                                                <img src="./images/item2/img10.png" alt="">
                                                <img src="./images/item2/img7.png" alt="">
                                            </div>
                                            <h3 class="fz16 mb20">Wonderful Friendship</h3>
                                            <div class="panel2-box">   
                                                ${(function(){  
                                                    let dom = '';
                                                    if(data.first_time_of_contact != ''){
                                                        dom=dom+  ` <p class='fade fade-time-1'>On <span class="cGreen ">${timeChange(data.first_time_of_contact)}</span></p> 
                                                        <p class='fade fade-time-2'>you first communicated with<span class="cRed">${data.first_user_login_of_contact}</span> </p> `

                                                    } 
                                                    if(data.first_time_of_comment_other != ''){
                                                        dom=dom+ `<p class='fade fade-time-3'>On <span class="cGreen">${timeChange(data.first_time_of_comment_other)}</span></p>
                                                            <p class='fade fade-time-4'>you commented under<span class="cRed">${data.first_user_login_of_comment}</span> post</p>`

                                                    } 
                                                    if(data.user_login_with_most_contact != ''){
                                                        dom=dom+ `<p class='fade fade-time-5'><span class="cGreen">This year,</span></p><p class='mb12 fade fade-time-6'>you had the most contact with <span class="cRed">${data.user_login_with_most_contact}</span> </p> `

                                                    }
                                                    if(data.first_user_login_of_be_comment != ''){
                                                        dom=dom+ `<p class='fade fade-time-7'><span class="cGreen">${timeChange(data.first_time_of_be_comment)}</span></p>
                                                            <p class='fade fade-time-8'>was a very special day,</p>
                                                            <p class='fade fade-time-9'><span class="cRed">${data.first_user_login_of_be_comment}</span>raised the first issue to you.</p>  `
                                                            
                                                    } 
                                                    return dom;

                                                })()}
                                                
                                            </div>
                                            <div class="panel2-bottom">
                                                <img src="./images/item2/女.png" alt="">
                                                <img src="./images/item2/虚线.png" alt="">
                                                <p class="img3"><span></span></p>
                                            </div> 
                                        </div>
                                    </div>`
                        list[2] = `<div class="contents">
                                        <div class="page ">
                                            <div class="panel3-box"> 
                                                <p class="fb fz14 fade fade-time-1">Great Achievements</p>
                                                <p class="fb fz14 fade fade-time-2" style="margin:5px 0">This year,</p>
                                                <p class="mb12 fade fade-time-3">  
                                                    ${(function(){
                                                        let dom ='' 
                                                        if( data.pr_num != '0'){
                                                            dom = dom+ `you submitted <span class="fb fz14 cOrange">${data.pr_num }</span> PR(s),<br>`
                                                        }
                                                        if( data.issue_num != '0'){
                                                            dom = dom+ `raised <span class="fb fz14 cOrange">${data.issue_num }</span> issue(s),<br>`
                                                        } 
                                                        if( data.code_lines != '0'){
                                                            dom = dom+ `wrote  <span class="fb fz14 cOrange">${data.code_lines}</span> lines of code,<br>`
                                                        }
                                                        if ( data.star_num != '0'){
                                                            dom = dom+ `and contributed to <span class="fb fz14 cOrange">${data.star_num}</span> repo(s).<br>`
                                                        } 
                                                        return dom ;
                                                    })()} 
                                                </p>
                                                <p class="fade fade-time-4">Every line of code matters to openLooKeng.</p>
                                                <p class="fade fade-time-5">Your insights have helped openLooKeng grow into a vibrant ecosystem.</p> 

                                                <p class="mb12 fade fade-time-4"> Congratulations! <br> You beat <span class="fb fz14 cOrange">${percentage} % </span>developer's contributions this year! </p>
                                                ${(function(){  
                                                    let dom = '';
                                                    if(percentage<=10 ){
                                                        dom =  `
                                                            <p class="fb fz14">You are now a <span class="fz16 cOrange">Beginner</span></p>
                                                            <div class="code-box"> 
                                                                <img src="./images/新手型@2x.png" alt="">
                                                            </div>
                                                            <p class="fz12 cOrange ">Welcome! You made a good start, but we know you can do better. Earn more points by exploring the openLooKeng issues, code, and more. </p>
                                                        `    
                                                    }
                                                    if(percentage>10 && percentage<=30 ){
                                                        dom =  `
                                                            <p class="fb fz14">You are now a <span class="fz16 cOrange">Adviser</span></p>
                                                            <div class="code-box"> 
                                                                <img src="./images/进击型@2x.png" alt="">
                                                            </div>
                                                            <p class="fz12 cOrange ">Good work! Thanks for all the engagement over the past year, and everything you help to refine openLooKeng.</p>
                                                        `    
                                                    }
                                                    if(percentage>30 && percentage<=60 ){
                                                        dom =  `
                                                            <p class="fb fz14">You are now a <span class="fz16 cOrange">Thinker</span></p>
                                                            <div class="code-box"> 
                                                                <img src="./images/思考型@2x.png" alt="">
                                                            </div>
                                                            <p class="fz12  cOrange ">You are getting pretty good at this! Your enthusiasm and passion for openLooKeng means you will soon be one of the community's expert programmers.</p>
                                                        `    
                                                    }
                                                    if(percentage =>60 ){
                                                        dom =  `
                                                            <p class="fb fz14">You are now a <span class="fz16 cOrange">Guru</span></p>
                                                            <div class="code-box"> 
                                                                <img src="./images/天赋型@2x.png" alt="">
                                                            </div>
                                                            <p class="fz12  cOrange ">Your contributions to the openLooKeng community are the fuel we need to light our future. Long may it continue.</p>
                                                        `   
                                                    }
                                                    return dom;
                                                })()} 
                                                <img class="fj" src="./images/item3/fj.png" alt="">
                                            </div> 

                                        </div>
                                    </div>
                                    
                                    `
                        list[3] = `<div class="contents">
                                    <div class="page page-six">
                                        <div class="main">
                                            <div class="six-logo"><img src="./images/item6/logo.png" alt=""></div>
                                            <div class="text-box ">
                                                <p class="">For every contribution, </p>
                                                <p class="">comment, and click in 2021,</p>
                                                <p class="">we say - Thank you.</p>
                                                <p class="">Stay with us to build a better</p>
                                                <p class=" ">openLooKeng in 2022.</p>
                                                <p class=" ">Always by your side.</p>
                                                <p class=" ">Happy New Year!</p>
                                                <p class="bold" style="margin: 40px 0 0;">From,</p>
                                                <p class="bold">The openLooKeng open source community</p>
                                            </div>
                                        </div>
                                        <div class="bg-six">
                                            <div class="footer">
                                                <img src="./images/item6/女+猫.png" alt="">
                                            </div>
                                            <div class="border"> </div>
                                        </div> 
                                    </div>
                                </div>
                                `
                    }
                    back[i].innerHTML = list[i]  
                }
                pcBox.find('.front').css({transform:'rotateY(-180deg)'}) 
                pcBox.find('.back').css({transform:'rotateY(0deg)'})
            }) 
        }
        
        // 移动端事件
        let swper = null;
        function intaSwiper(data, percentage,isH5Contribution) {
            let list = []  
            
            if(isH5Contribution){
                $('#outer-container').addClass('no-h5-contribution')
                list = [{
                    content: `
                    <div class="page page-one">
                        <div class="text-box"> 
                            <div class="ani1">
                                <p class="fz16">2021 openLooKeng Un-Wrapped</p> 
                                <p class="fz14">Dear</p>
                                <p class="cOrange fz16 mb12 ">${data.user_login}</p>
                                <p class="one-text">Do what you love, and love what you do.</p>
                                <p class="one-text">As we usher in 2022,</p>
                                <p class="one-text">let's look back at the special moments from the past year.</p>
                                <p class="one-text ">On June 30, 2020,</p>
                                <p class="one-text ">he data virtualization engine openLooKeng</p>
                            </div>
                            <div class="video-temp">  
                                <img src="./images/item1/img6.png" alt="">
                                <img src="./images/item1/img3.png" alt="">
                            </div>
                        </div>
                        <div class="people">
                            <img src="./images/item1/img4.png" alt="">
                            <img src="./images/item1/img1.png" alt="">
                            <img src="./images/item1/img2.png" alt="">
                        </div> 
                    </div>
                    `
                }, {
                    content: ` 
                    <div class="page page-three" >
                        <div class="contents">
                            <div class="page page-three">
                                <div class="panel2-top">
                                    <img src="./images/item2/img10.png" alt="">
                                    <img src="./images/item2/img7.png" alt="">
                                </div> 
                                <div class="panel2-box">  
                                    <p class="one-text">Since then, the community has attracted <span class='cOrange fz14'>over 100,000</span> users</p>
                                    <p class="one-text">and <span class='cOrange fz14'>2,000</span> pull requests, </p>
                                    <p class="one-text">received <span class='cOrange fz14'>1,500</span> issue</p>
                                    <p class="one-text">housed <span class='cOrange fz14'>27,900</span> comments.</p>
                                    <p class="one-text">openLooKeng has been downloaded more than<span class='cOrange fz14'>100,000 times </span>by users </p>
                                    <p class="one-text mb12">from <span class='cOrange fz14'>210</span> cities across <span class='cOrange fz14'>40</span>countries and regions</p>

                                    <p class="one-text">We hope to see you in the openLooKeng community in 2022. </p>
                                    <p class="one-text"><span class="cOrange fz16">Together, we can </span></p>
                                    <p class="one-text">build a prosperous big data ecosystem.</p> 
                                </div>
                                <div class="panel2-bottom">
                                    <img src="./images/item2/女.png" alt="">
                                    <img src="./images/item2/虚线.png" alt="">
                                    <p class="img3"><span></span></p>
                                </div> 
                            </div>
                        </div>
                    </div>
                    `
                }, {
                    content: `
                    <div class="page page-six">
                        <div class="main">
                            <div class="six-logo"><img src="./images/item6/logo.png" alt=""></div>
                            <div class="text-box ">
                                <p class="">For every contribution, </p>
                                <p class="">comment, and click in 2021,</p>
                                <p class="">we say - Thank you.</p>
                                <p class="">Stay with us to build a better</p>
                                <p class=" ">openLooKeng in 2022.</p>
                                <p class=" ">Always by your side.</p>
                                <p class=" ">Happy New Year!</p>
                                <p class="bold" style="margin: 40px 0 0;">From,</p>
                                <p class="bold">The openLooKeng open source community</p>
                            </div>
                        </div>
                        <div class="bg-six">
                            <div class="footer">
                                <img src="./images/item6/女+猫.png" alt="">
                            </div>
                            <div class="border"> </div>
                        </div> 
                    </div> 
                    `
                }]
            }else{
                $('#outer-container').removeClass('no-h5-contribution')
                list = [{
                    content: `
                    <div class="page page-one">
                        <div class="text-box"> 
                            <div class="ani1">
                                <p class="fz16">2021 openLooKeng Un-Wrapped</p> 
                                <p class="fz14">Dear</p>
                                <p class="cOrange fz16 mb12 ">${data.user_login}</p>
                                <p class="one-text">Do what you love, and love what you do,</p>
                                <p class="one-text">In 2021, we made progress against all odds.</p>
                                <p class="one-text">As we usher in 2022,</p>
                                <p class="one-text ">let's look back at the special moments from the past year.</p>
                                <p>Swipe down to access youer<span class="fz14 fb cOrange">【2021 Un-Wapped】</span></p>
                            </div>
                            <div class="video-temp">  
                                <img src="./images/item1/img6.png" alt="">
                                <img src="./images/item1/img3.png" alt="">
                            </div>
                        </div>
                        <div class="people">
                            <img src="./images/item1/img4.png" alt="">
                            <img src="./images/item1/img1.png" alt="">
                            <img src="./images/item1/img2.png" alt="">
                        </div> 
                    </div>
                    `
                }, {
                    content: `
                    <div class="page page-tow">
                        <div class="text-box ani1">
                            <p class="fz16">First Encounter</p> 
                            <p>It all started on<span class="fz14 cOrange">${timeChange(data.first_time_of_enter)} </span></p>
                            <p>when you first joined the openLooKeng community.</p>
                            <p>A quick browse turned into a long-lasting partnership.</p>
                            <p>Because of you, every moment is worth remembering.</p>
                        </div>
                        <div class="panel-mo2">
                            <img src="./images/item2/男+绿色块.png" alt="">
                            <img src="./images/item2/虚线1.png" alt="">
                            <img src="./images/item2/女1.png" alt="">
                            <img src="./images/item2/对半色圆饼+绿色箭头.png" alt="">
                            <img src="./images/item2/纸飞机.png" alt="">
                        </div>
                    </div>
                    `
                }, {
                    content: `
                    <div class="page page-three" >
                        <div class="contents">
                            <div class="page page-three">
                                <div class="panel2-top">
                                    <img src="./images/item2/img10.png" alt="">
                                    <img src="./images/item2/img7.png" alt="">
                                </div>
                                <h3 class="fz16 mb20">Wonderful Friendship</h3>
                                <div class="panel2-box">
                                    ${(function(){  
                                        let dom = '';
                                        if(data.first_time_of_contact != ''){
                                            dom=dom+  ` <p class='fade fade-time-1'>On <span class="cGreen ">${timeChange(data.first_time_of_contact)}</span></p> 
                                            <p class='fade fade-time-2'>you first communicated with<span class="cRed">${data.first_user_login_of_contact}</span> </p> `

                                        } 
                                         if(data.first_time_of_comment_other != ''){
                                            dom=dom+ `<p class='fade fade-time-3'>On <span class="cGreen">${timeChange(data.first_time_of_comment_other)}</span></p>
                                                <p class='fade fade-time-4'>you commented under<span class="cRed">${data.first_user_login_of_comment}</span> post</p>`

                                        } 
                                         if(data.user_login_with_most_contact != ''){
                                            dom=dom+ `<p class='fade fade-time-5'><span class="cGreen">This year,</span></p><p class='mb12 fade fade-time-6'>you had the most contact with <span class="cRed">${data.user_login_with_most_contact}</span> </p> `

                                        }
                                         if(data.first_user_login_of_be_comment != ''){
                                            dom=dom+ `<p class='fade fade-time-7'><span class="cGreen">${timeChange(data.first_time_of_be_comment)}</span></p>
                                                <p class='fade fade-time-8'>was a very special day,</p>
                                                <p class='fade fade-time-9'><span class="cRed">${data.first_user_login_of_be_comment}</span>raised the first issue to you.</p>  `
                                                
                                        } 
                                        return dom;

                                    })()}  
 
                                </div>
                                <div class="panel2-bottom">
                                    <img src="./images/item2/女.png" alt="">
                                    <img src="./images/item2/虚线.png" alt="">
                                    <p class="img3"><span></span></p>
                                </div> 
                            </div>
                        </div>
                    </div>   `
                }, {
                    content: `
                        <div class="page page-four">
                            <div class="panel-mo4">
                                <img src="./images/item4/img1.png" alt="">
                                <img src="./images/item4/一男一女.png" alt="">
                                <img src="./images/item4/双人组合.png" alt="">
                                <img src="./images/item4/男.png" alt="">
                                <img src="./images/item4/纸飞机.png" alt="">
                            </div>
                            <div class="text-box">
                                <p class="fade fade-time-1">Great Achievements</p>
                                <p class="fade fade-time-2">This year,</p> 
                                 <p class="fade fade-time-3"> 
                                    ${(function(){
                                        let dom ='' 
                                            if( data.pr_num != '0'){
                                            dom = dom+ `you submitted <span class="fb fz14 cOrange">${data.pr_num }</span> PR(s),<br>`
                                        }
                                            if( data.issue_num != '0'){
                                            dom = dom+ `raised <span class="fb fz14 cOrange">${data.issue_num }</span> issue(s),<br>`
                                        } 
                                        if( data.code_lines != '0'){
                                            dom = dom+ `wrote  <span class="fb fz14 cOrange">${data.code_lines}</span> lines of code,<br>`
                                        }
                                        if (data.star_num != '0'){
                                            dom = dom+ `and contributed to <span class="fb fz14 cOrange">${data.star_num}</span> repo(s).<br>`
                                        } 
                                        return dom ;
                                    })()}
                                </p>
                                <p class="fade fade-time-4">Every line of code matters to openLooKeng.</p>
                                <p class="fade fade-time-5">Your insights have helped openLooKeng grow into a vibrant ecosystem.</p>
                            </div>
                        </div>   
                    `
                }, {
                    content: `
                        <div class="page page-five"> 
                            <div class="panel3-box">
                                <p class=" mb12 ">Dear <span class='cOrange fz16'>${data.user_login}</span></p>
                                <p class="mb12"> Congratulations!  <br> 
                                You beat <span class="fb fz14 cOrange">${percentage} %</span>developer's contributions this year! </p> 
                            ${(function(){ 
                                let dom ='';
                                    if(percentage<=10 ){
                                        dom =  `
                                            <p class="fb fz14">You are now a <span class="fz16 cOrange">Beginner</span></p>
                                            <div class="code-box"> 
                                                <img src="./images/新手型@2x.png" alt="">
                                            </div>
                                            <p class="fz12 cOrange ">Welcome! You made a good start, but we know you can do better. Earn more points by exploring the openLooKeng issues, code, and more. </p>
                                        `    
                                    }
                                     if(percentage>10 && percentage<=30 ){
                                        dom =  `
                                            <p class="fb fz14">You are now a <span class="fz16 cOrange">Adviser</span></p>
                                            <div class="code-box"> 
                                                <img src="./images/进击型@2x.png" alt="">
                                            </div>
                                            <p class="fz12 cOrange ">Good work! Thanks for all the engagement over the past year, and everything you help to refine openLooKeng.</p>
                                        `    
                                    }
                                    if(percentage>30 && percentage<=60 ){
                                        dom =  `
                                            <p class="fb fz14">You are now a <span class="fz16 cOrange">Thinker</span></p>
                                            <div class="code-box"> 
                                                <img src="./images/思考型@2x.png" alt="">
                                            </div>
                                            <p class="fz12  cOrange ">You are getting pretty good at this! Your enthusiasm and passion for openLooKeng means you will soon be one of the community's expert programmers.</p>
                                        `    
                                    }
                                    if(percentage >60 ){
                                        dom =  `
                                            <p class="fb fz14">You are now a <span class="fz16 cOrange">Guru</span></p>
                                            <div class="code-box"> 
                                                <img src="./images/天赋型@2x.png" alt="">
                                            </div>
                                            <p class="fz12  cOrange ">Your contributions to the openLooKeng community are the fuel we need to light our future. Long may it continue.</p>
                                        `   
                                    }
                                    return dom;
                                })()}
                            </div> 
                            <div class="panel-mo5">
                                <img src="./images/item5/男.png" alt="">
                                <img style='display:none' src="./images/item5/share.png" alt="">
                                <img src="./images/item5/logo.png" alt="">
                                <div class="code-tile"> 
                                    <img src="./images/code.png" class='codeImg' alt=""> 
                                    <p>Check your 2021 openLooKeng Un-Wrapped</p>
                                </div>
                                
                            </div> 
                    </div>    `
                }, {
                    content: `
                    <div class="page page-six">
                        <div class="main">
                            <div class="six-logo"><img src="./images/item6/logo.png" alt=""></div>
                            <div class="text-box ">
                                <p class=" ">For every contribution, comment, </p>
                                <p class="">and click in 2021,</p>
                                <p class="">we say – Thank you.</p>
                                <p class=" ">Stay with us to build a better</p>
                                <p>openLooKeng in 2022.</p>
                                <p>Always by your side.</p>
                                <p>Happy New Year!</p>
                                <p class="bold" style="margin: 20px 0 0;">From,</p>
                                <p class="bold">The openLooKeng open source community</p>
                            </div>
                        </div>
                        <div class="bg-six">
                            <div class="footer">
                                <img src="./images/item6/女+猫.png" alt="">
                            </div>
                            <div class="border"> </div>
                        </div> 
                    </div>  `
                }]

            }
            swiper = new Swiper({
                container: container,
                data: list,
            });
        }
    </script>
</body>

</html>